<template>
  <div ref="chartRef" class="w-100 h-100 flex-center"></div>
</template>

<script setup>
/**
 * 组件说明
 * */
import * as echarts from "echarts";
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const chartRef = ref({});
const chartObj = ref(null);

const init = () => {
  nextTick(() => {
    if (!chartObj.value) {
      chartObj.value = echarts.init(chartRef.value);
    }
    chartObj.value.setOption(props.options);
    window.addEventListener("resize", chartObj?.value.resize);
  });
};
watch(
  () => props.options,
  () => {
    init();
  },
  {
    immediate: true,
    deep: true,
  }
);
onMounted(() => {});
onBeforeUnmount(() => {
  window.removeEventListener("resize", chartObj?.value.resize);
});
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
</style>
